<template>
  <div class="menu-manage-wrapper">
    <div class="menu-manage-header">
      <label>子系统：</label>
      <el-select v-model="systemValue" placeholder="请选择" size="small" @change="serverChange">
        <el-option v-for="item in systemOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="first-menus">
      <el-card class="box-card">
        <div slot="header">
          <span class="box-card-title">菜单管理</span>
          <button class="add-node-btn" type="text" @click="showModal($event,'add')" :disabled="serverId == ''">
            <span class="delete-node-icon"></span>新增一级节点
          </button>
          <button class="delete-node-btn" type="text" @click="deleteNode()" :disabled="serverId == ''">
            <span class="delete-node-icon"></span>删除节点
          </button>
        </div>
        <tree-view ref="first" :treeData="generateTree" :expandOnClickNode="false" :showCheckbox="true" :defaultExpandAll="true" :showFlag="showFlag"
                   :operateLevel="operateLevel" @on-check-change="firstCheckChange" @on-add="showModal($event,'add')" @on-edit="showModal($event,'edit')"
                   @on-delete="showModal($event,'delete')">
        </tree-view>
      </el-card>
    </div>
    <el-dialog :title="menuDialogTitle" width="600px" :visible.sync="generateFirstMenu">
      <div v-if="menuDialogTitle !== '删除节点'">
        <div class="input-box">
          <label class="input-title">节点名称：</label>
          <el-input class="first-menu-name" v-model="firstMenuName" size="small"></el-input>
        </div>
        <div class="input-box second-menu-input">
          <label class="input-title">节点路由：</label>
          <el-input class="first-menu-name" v-model="nodeRouter" size="small"></el-input>
        </div>
      </div>
      <div v-else>
        您确定要删除这些信息吗？
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveFirstMenu">确 定</el-button>
        <el-button @click="generateFirstMenu = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'MenuManage',
    data() {
      let baseUrl = managerRemoteGatewayUrl;
      return {
        urls: {
          getServerListUrl: baseUrl + '/menu/server/list', //获取所有服务
          getMenuUrl: baseUrl + '/menu/tree', //获取右侧所有的菜单树
          generateFirstMenuUrl: baseUrl + '/menu/add', //生成一级菜单
          deleteNodeUrl: baseUrl + '/menu/delete', //批量删除菜单
          menuUpdateUrl: baseUrl + '/menu/update', //节点位置修改
          addSecondMenuUrl: baseUrl + '/menu/add/leve2', //新增二级节点
          editMenuUrl: baseUrl + '/menu/edit' //新增二级节点
        },
        generateTree: [],
        selectedFirstMenus: [],
        generateFirstMenu: false,
        addMenu: false,
        firstMenuName: '',
        nodeRouter: '',
        addMenuParentId: '',
        systemOption: [],
        systemValue: '',
        menuDialogTitle: '',
        serverId: '',
        deleteFlag: false,
        deleteId: '',
        serverName: '',
        level: '',
        editMenu: null,
        showFlag:{
          isAddShow: true,
          isEditShow: true,
          isDeleteShow: true
        },
        operateLevel:{
          add:[1,2,3],
          edit:[1,2,3],
          delete:[2,3]
        }
      }
    },
    methods: {
      //获取子系统列表
      getServerList() {
        let me = this;
        this.httpRequest('get',this.urls.getServerListUrl,{},{
          hideSuccessTip: true,
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          me.systemOption = me.cloneObj(res.value);
        })
      },
      //切换子系统
      serverChange(val) {
        this.serverId = val;
        this.serverName = '';
        this.systemOption.forEach((d) => {
          if(d.value == val){
            this.serverName = d.label;
          }
        });
        this.getMenuData(val);
      },
      //获取菜单树
      getMenuData(serverid) {
        let me = this;
        this.generateTree = [];
        this.httpRequest('get',`${this.urls.getMenuUrl}?serverid=${serverid}`,{},{
          hideSuccessTip: true,
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          if (res.value.children && res.value.children.length != 0) {
            me.generateTree = res.value.children;
          }
        })
      },
      showModal(e,str) {
        let node = e ? e.node : undefined;
        if (str === 'add') {
          if (node === undefined) {
            this.menuDialogTitle = '新增一级菜单';
            this.level = 2;
          } else {
            this.menuDialogTitle = '新增菜单';
            this.addMenuParentId = node.key;
            this.level = node.data.level + 1;
          }
          this.firstMenuName = "";
          this.nodeRouter = "";
        }else if(str === 'edit'){
          this.menuDialogTitle = "编辑菜单";
          this.editMenu = this.cloneObj(node.data.data);
          this.firstMenuName = this.editMenu.name;
          this.nodeRouter = this.editMenu.prefixUrl;
        } else if (str === 'delete') {
          this.deleteId = node.key;
          this.deleteFlag = true;
          this.menuDialogTitle = "删除节点";
        }
        this.generateFirstMenu = true;
      },
      //保存节点
      saveFirstMenu() {
        if(this.menuDialogTitle === "删除节点"){
          this.deleteNodeSave();
        }else{
          if (this.isEmpty(this.firstMenuName)) {
            this.message(this,'info','请输入节点名称');
            return false;
          }
          if (this.isEmpty(this.nodeRouter)) {
            this.message(this,'info','请输入节点路由');
            return false;
          }
          let param = {
            name: this.firstMenuName,
            prefixUrl: this.nodeRouter,
          };
          if(this.menuDialogTitle === "编辑菜单"){
            param["server_id"] = this.editMenu.serverId;
            param["subsystem"] = this.editMenu.subsystem;
            param["level"] = this.editMenu.level;
            param["id"] = this.editMenu.id;
            this.editMenu.pid && (param["pid"] = this.editMenu.pid);
            this.save('edit',param);
          }else{
            param["server_id"] = this.serverId;
            param["subsystem"] = this.serverName;
            param["level"] = this.level;
            this.menuDialogTitle === '新增菜单' && (param["pid"] = this.addMenuParentId);
            this.save('put',param);
          }
        }
      },
      save(str,param){
        let type = 'post',url = this.urls.generateFirstMenuUrl,serverId = this.serverId;
        str === 'edit' && (type = 'put',url = this.urls.editMenuUrl,serverId = this.editMenu.serverId);
        this.httpRequest(type,url,param,{
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          this.message(this,'success',res.message);
          this.getMenuData(serverId);
          this.generateFirstMenu = false;
          this.firstMenuName = '';
          this.nodeRouter = '';
        })
      },
      firstCheckChange(data, isChecked, children) {
        this.selectedFirstMenus = this.$refs.first.$refs.tree.getCheckedNodes();
      },
      //删除一级节点
      deleteNode() {
        if (this.selectedFirstMenus && this.selectedFirstMenus.length === 0) {
          this.$notify({title: '警告', message: '请先选择需要删除的节点', type: 'warning'});
          return false;
        }
        this.deleteFlag = false;
        this.menuDialogTitle = "删除节点";
        this.generateFirstMenu = true;
      },
      //删除节点
      deleteNodeSave() {
        let me = this, ids = [], url = '';
        if (this.deleteFlag) {
          url = this.urls.deleteNodeUrl + "?menuid=" + this.deleteId;
        } else {
          this.selectedFirstMenus.forEach((d) => {
            ids.push(d.id);
          });
          url = this.urls.deleteNodeUrl + "?menuid=" + ids.join(",");
        }
        this.httpRequest('delete',url,{},{
          ignoreEmptyData: true,
          fullSuccess: true,
        }).then(res => {
          this.message(this,'success',res.message);
          me.getMenuData(me.serverId);
          me.deleteId = '';
          me.deleteFlag = false;
          me.selectedFirstMenus = [];
          me.generateFirstMenu = false;
        })
      }
    },
    mounted() {
      this.getServerList();
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "../../../assets/styles/base_style";
  .menu-manage-wrapper:after {
    @include clearFloat;
  }
  .menu-manage-wrapper {
    // @include minHeightInherit;
    width: 100%;
    height: 100%;
    .menu-manage-header {
      padding-bottom: 10px;
    }
    .box-card-title {
      font-size: 16px;
      color: $fontColor333;
      font-weight: bold;
    }
    .first-menus {
      float: left;
      width: calc(100%);
      height: calc(100% - 45px);
      .box-card {
        height: 100%;
      }
      .add-node-btn {
        @include btnStyle(14px, 30px);
        position: absolute;
        top: 11px;
        right: 166px;
        &:disabled {
          opacity: .6;
          cursor: no-drop;
        }
      }
      .delete-node-btn {
        @include btnStyle(14px, 30px);
        position: absolute;
        top: 11px;
        right: 20px;
        .delete-node-icon {
          display: inline-block;
          background: url("../../../assets/images/systemmanage/menu_manage_delete_node.png") no-repeat;
          width: 16px;
          height: 16px;
          position: relative;
          top: 2px;
          left: -5px;
        }
        &:disabled {
          opacity: .6;
          cursor: no-drop;
        }
      }
    }
    .input-box {
      .input-title {
        display: inline-block;
        font-size: 16px;
        width: 120px;
        text-align: right;
      }
      .first-menu-name {
        width: calc(100% - 155px);
      }
    }
    .second-menu-input {
      margin-top: 20px;
    }
  }
</style>
<style rel="stylesheet/scss" lang="scss">
  @import "../../../assets/styles/base_style";
  .menu-manage-wrapper {
    .el-card__body {
      height: calc(100% - 50px);
      padding: 0px;
    }
    .el-card__header {
      background: #EFF3FE;
      border: 1px solid #e1e1e1;
      height: 52px;
      padding: 15px 20px;
      position: relative;
    }
  }
</style>
